$(document).ready(function() {
    function fetchVideoList() {
        $.ajax({
            url: '/list',
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({}),
            success: function(response) {
                if (response.code === 0) {
                    renderVideoList(response.rows);
                } else {
                    alert('获取视频列表失败: ' + response.msg);
                }
            },
            error: function(xhr, status, error) {
                alert('请求失败: ' + error);
            }
        });
    }

    function renderVideoList(videos) {
        const videoListContainer = $('#video-list');
        videoListContainer.empty();

        videos.forEach(video => {
            const videoItem = `
                <div class="video-item">
                    <a href="${video.url}" target="_blank">
                        <img src="${video.thumbnail}" alt="${video.title}">
                    </a>
                    <div class="video-info">
                        <p class="title">${video.title}</p>
                        <p class="description">${video.description}</p>
                    </div>
                </div>
            `;
            videoListContainer.append(videoItem);
        });
    }

    fetchVideoList();
});
